<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: transparent;
        }
        .member-title {
            width: 2.00rem;
            height: 0.25rem;
            background-size: 2.00rem 0.25rem;
            background-image: url("../../image/my/member-title.png");
        }
        .jin-ui {
            width: 0.54rem;
            height: 0.45rem;
            background-size: 0.54rem 0.45rem;
            background-image: url("../../image/my/jin-ui.png");
        }
        .yin-ui {
            width: 0.54rem;
            height: 0.45rem;
            background-size: 0.54rem 0.45rem;
            background-image: url("../../image/my/yin-ui.png");
        }
    </style>
</head>
<body class="flex" style="justify-content: center; flex-wrap: wrap; align-content: flex-start;">
    <div class="flex member-title" style="justify-content: center; align-items: center; margin-top: 0.30rem">
        <p style="font-size: 0.18rem; font-weight: 600; color: #231313;">会员特权</p>
    </div>
    <div id="member-pad" class="flex" style="margin-top: 0.30rem; box-shadow: 0rem 0.01rem 0.18rem rgba(0,0,0,0.14); width: 3.45rem; height: 1.05rem; align-items: center;">
        <div id="member-ui" style="margin-left: 0.30rem; margin-right: 0.15rem;"></div>
        <div>
            <p id="member-title" style="font-size: 0.18rem; color: #231313"></p>
            <p id="member-note" style="margin-top: 0.05rem; font-size: 0.12rem; color: #A0522C"></p>
        </div>
    </div>
    <div id="product-block" class="flex" style="width: 100%; flex-wrap: wrap; justify-content: center; margin-top: 0.18rem">
        <div id="product-list" style="width: 3.50rem; background-color: #FFFFFF;"></div>
    </div>
    <div class="flex" style="width: 100%; justify-content: center; margin-top: 0.80rem;">
        <div class="flex" style="justify-content: center; align-items: center; width: 2.97rem; height: 0.45rem; background-color: #A0522C; border-radius: 0.28rem;" tapmode onclick="openMemberOrderWin();">
            <p id="by-button" style="font-size: 0.15rem; color: white;"></p>
        </div>
    </div>
    <div style="width: 100rem; height: 0.80rem"></div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var memberUiEl, memberTitleEl, memberNoteEl, memberPadEl, byButtonEl;
    var productBlock;
    var bannerData, select, productList = [];
    var orderInder, perIndex
    apiready = function () {
        productBlock = $api.byId('product-block');
        memberPadEl = $api.byId('member-pad');
        memberUiEl = $api.byId('member-ui');
        memberTitleEl = $api.byId('member-title');
        memberNoteEl = $api.byId('member-note');
        byButtonEl = $api.byId('by-button');

        bannerData = [
            {
                "title": "风水医道大师一对一服务",
                "note": "续费金牌会员（最低1元/天）",
                "img": "../../image/my/jin-ui.png",
                "button": "购买金牌会员",
            },{
                "title": "无限制观看大相培训课程",
                "note": "续费金牌会员（最低0.5元/天）",
                "img": "../../image/my/yin-ui.png",
                "button": "购买银牌会员",
            }
        ];
        // var jsfun = 'changeMemberBlock(0);';
        var jsfun = 'changeMemberBlock(' + api.pageParam.tag + ');';
        api.execScript({
            script: jsfun
        });
    }

    function changeMemberList(tag) {
        $api.css(memberUiEl,'background-image: url(' + bannerData[tag]["img"] + ');');
        $api.text(memberTitleEl, bannerData[tag]["title"]);
        $api.text(memberNoteEl, bannerData[tag]["note"]);
        $api.text(byButtonEl, bannerData[tag]["button"]);

        orderInder = undefined;

        getProductList(tag)
    }

    function getProductList(tag) {
        productList = [];
        var productListEl = $api.byId('product-list');
        $api.remove(productListEl);
        $api.append(productBlock, '<div id="product-list" style="width: 3.50rem; background-color: #FFFFFF;"></div>');
        productListEl = $api.byId('product-list');

        api.ajax({
            url: apiUrl + '/buy/product-list',
            tag: '/buy/product-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    tag: tag
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    productList = ret.data.product_list;

                    for (var i=0,leni=productList.length; i<leni; i++) {

                        if (tag == 0) {
                            if (productList[i]["vip"] == 30) {
                                $api.append(productListEl, '<div id="od-' + i + '" class="flex" style="width: 100%; height: 0.65rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.005rem; border-color: #D0D0D0;" tapmode onclick="selectMemberOrderWin(' + i + ')">' +
                                    '<p style="font-size: 0.16rem; color: #231313; margin-left: 0.15rem;">' + productList[i]["period"] + "天" + '</p>' +
                                    '<div class="flex" style="align-items: center; margin-right: 0.15rem;">' +
                                    '<p style="font-size: 0.18rem; font-weight: 600; color: #FF3B30; margin-right: 0.12rem;">' + "¥" + productList[i]["real_price"]/100 + '</p>' +
                                    '</div>' +
                                    '</div>');
                            }
                        } else if (tag == 1) {
                            if (productList[i]["vip"] == 20) {
                                $api.append(productListEl, '<div id="od-' + i + '" class="flex" style="width: 100%; height: 0.65rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.005rem; border-color: #D0D0D0;" tapmode onclick="selectMemberOrderWin(' + i + ')">' +
                                    '<p style="font-size: 0.16rem; color: #231313; margin-left: 0.15rem;">' + productList[i]["period"] + "天" + '</p>' +
                                    '<div class="flex" style="align-items: center; margin-right: 0.15rem;">' +
                                    '<p style="font-size: 0.18rem; font-weight: 600; color: #FF3B30; margin-right: 0.12rem;">' + "¥" + productList[i]["real_price"]/100 + '</p>' +
                                    '</div>' +
                                    '</div>');
                            }
                        }
                    }
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function selectMemberOrderWin(index) {
        if (orderInder != undefined) {
            $api.css($api.byId('od-' + orderInder),'background-color: #ffffff;');
        }
        $api.css($api.byId('od-' + index),'background-color: #FDEFE6;');
        orderInder = index;
    }

    function openMemberOrderWin() {
        if (orderInder != undefined) {
            api.openWin({
                name: 'memberOrderWin',
                url: './memberOrderWin.html',
                slidBackType: 'edge',
                pageParam: {
                    product_id: productList[orderInder]["product_id"],
                    real_price: productList[orderInder]["real_price"],
                },
                animation: {
                    type:"movein",
                    subType:"from_right",
                    duration:300
                }
            });
        } else {
            api.toast({
                msg: "请选择会员期限",
                duration: 2000,
                location: 'middle'
            });
        }
    }
</script>
